import type { OrderItem, OrderSearchParams } from '@/types/orderType'
import { Button, Form, Input, Select, Space, Table, type TableColumnsType } from 'antd'
import CreateOrder from './CreateOrder'
import { useRef } from 'react'
import type { IAction } from '@/types/modal'
import orderApi from '@/api/orderApi'
import { useAntdTable } from 'ahooks'
import { formatDate } from '@/utils'
import DetailOrder from './DetailOrder'
import { message, modal } from '@/utils/AntdGlobal'
import OrderMark from './OrderMark'
import PolyLine from './PolyLine'

const OrderList = () => {
  const [form] = Form.useForm()
  const orderRef = useRef<{
    open: (type: IAction) => void
  }>(undefined)
  const detailRef = useRef<{ open: (orderId: string) => void }>(undefined)
  const markRef = useRef<{ open: (orderId: string) => void }>(undefined)
  const polyRef = useRef<{ open: (orderId: string) => void }>(undefined)
  const getTableData = ({ current, pageSize }: { current: number; pageSize: number }, formData: OrderSearchParams) => {
    return orderApi
      .getOrderList({
        ...formData,
        pageSize: pageSize,
        pageNum: current
      })
      .then(res => {
        return {
          total: res.page.total,
          list: res.list
        }
      })
  }
  const handleCreate = () => {
    orderRef.current?.open('create')
  }
  const handleDetail = (id: string) => {
    detailRef.current?.open(id)
  }
  const handleDel = (_id: string) => {
    modal.confirm({
      title: '删除确认',
      content: '确认删除该订单吗',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        handleSubmitDel(_id)
      }
    })
  }
  const handleSubmitDel = async (_id: string) => {
    await orderApi.deleteOrder({ _id })
    message.success('删除成功')
    search.submit()
  }
  const handleMark = (id: string) => {
    markRef.current?.open(id)
  }
  const handlePoly = (orderId: string) => {
    polyRef.current?.open(orderId)
  }
  const handleExport = () => {
    orderApi.orderExport(form.getFieldsValue())
  }
  const { tableProps, search } = useAntdTable(getTableData, { form })
  const columns: TableColumnsType<OrderItem> = [
    {
      title: '订单编号',
      key: 'orderId',
      dataIndex: 'orderId'
    },
    {
      title: '城市',
      key: 'cityName',
      dataIndex: 'cityName'
    },
    {
      title: '下单地址',
      key: 'startAddress',
      dataIndex: 'startAddress'
    },
    {
      title: '下单时间',
      key: 'createTime',
      dataIndex: 'createTime',
      render: (value: Date) => {
        return formatDate(value)
      }
    },
    {
      title: '订单价格',
      key: 'orderAmount',
      dataIndex: 'orderAmount'
    },
    {
      title: '订单状态',
      key: 'state',
      dataIndex: 'state',
      render: (value: number) => {
        return {
          1: '进行中',
          2: '已完成',
          3: '超时',
          4: '取消'
        }[value]
      }
    },
    {
      title: '用户名称',
      key: 'userName',
      dataIndex: 'userName'
    },
    {
      title: '司机名称',
      key: 'driverName',
      dataIndex: 'driverName'
    },
    {
      title: '操作',
      render: (record: OrderItem) => {
        return (
          <Space>
            <Button type='text' onClick={() => handleDetail(record.orderId)}>
              详情
            </Button>
            <Button type='text' onClick={() => handleMark(record.orderId)}>
              打点
            </Button>
            <Button type='text' onClick={() => handlePoly(record.orderId)}>
              轨迹
            </Button>
            <Button type='text' onClick={() => handleDel(record._id)}>
              删除
            </Button>
          </Space>
        )
      }
    }
  ]
  return (
    <div className='order-list'>
      <Form form={form} layout='inline' className='search-form' initialValues={{ state: 1 }}>
        <Form.Item label='订单编号' name='orderId'>
          <Input placeholder='请输入订单编号'></Input>
        </Form.Item>
        <Form.Item label='用户名称' name='userName'>
          <Input placeholder='请输入用户名称'></Input>
        </Form.Item>
        <Form.Item label='订单状态' name='state'>
          <Select
            placeholder='请选择状态'
            options={[
              { label: '进行中', value: 1 },
              { label: '已完成', value: 2 },
              { label: '超时', value: 3 },
              { label: '取消', value: 4 }
            ]}
            style={{ width: 150 }}
          ></Select>
        </Form.Item>
        <Form.Item>
          <Space>
            <Button type='primary' onClick={search.submit}>
              搜索
            </Button>
            <Button onClick={search.reset}>重置</Button>
          </Space>
        </Form.Item>
      </Form>
      <div className='base-table'>
        <div className='header-wrapper'>
          <div className='title'>订单列表</div>
          <div className='action'>
            <Button type='primary' onClick={handleCreate}>
              新增
            </Button>
            <Button onClick={handleExport}>导出列表</Button>
          </div>
        </div>
        <Table rowKey='_id' {...tableProps} columns={columns}></Table>
      </div>
      <CreateOrder mRef={orderRef} update={search.submit}></CreateOrder>
      <DetailOrder mRef={detailRef}></DetailOrder>
      <OrderMark mRef={markRef}></OrderMark>
      <PolyLine mRef={polyRef}></PolyLine>
    </div>
  )
}

export default OrderList
